<template>
    <div style="height:100%;width:100%;">
        <el-row class="mainContent el-row">
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
                    <el-form-item label="" prop="id">
                        <el-input v-model="formInline.id" placeholder="机构ID"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="state">
                        <el-select v-model="formInline.state" placeholder="状态">
                            <el-option label="不限" value=""></el-option>
                            <el-option label="正常" value="1"></el-option>
                            <el-option label="冻结" value="2"></el-option>
                            <el-option label="未激活" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                       
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" highlight-current-row>
                <el-table-column label="账户">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.lastlogintime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="机构id">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.organizationid }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.state | state }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280px">
                    <template slot-scope="scope">
                        <el-button size="mini" v-if="scope.row.state==3" type="text" @click="selectId(scope.$index, scope.row)">激活账户</el-button>
                        <el-button size="mini" v-else type="text" @click="switchoverType(scope.$index, scope.row)">切换状态</el-button>
                        <el-button size="mini" type="text" @click="resetPwd(scope.$index, scope.row)">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="orderPage.pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-row>
        <el-dialog title="激活账号" :visible.sync="addUsersVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="addForm" ref="editPwdForm" status-icon label-width="100px" style="text-align:left">
                <el-form-item label="选择机构" prop="organizationId">
                  
                        <el-select v-model="addForm.organizationId" placeholder="机构ID">
                            <el-option v-for="(item,index) in addForm.organizaIdList" :key="index" :label="item.company" :value="item.id"></el-option>
                        </el-select>
                 
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addUsersVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="activateAdmin">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            addLoading: false,
            formInline: {},
            tableData: [],
            orderPage: {
                pageNo: 1,
                pageSize: 10,
            },
            total: 1,

            //创建机构
            addForm: {},
            addUsersVisible: false,

            organizaIdList: [],
            adminId: null,
        }
    },
    filters: {
        state(val) {
            switch (val) {
                case 1:
                    return '正常';
                    break
                case 2:
                    return '冻结';
                    break
                case 3:
                    return '未激活';
                    break

            }
        }
    },
    created() {
        this.orderList();
        this.getorganizationId()
    },
    methods: {
        orderList() {
            this.listLoading = true;
            var obj = {
                data: {
                    organizationId: this.formInline.id,
                    state:this.formInline.state,
                    pageNo: this.orderPage.pageNo,
                    pageSize: this.orderPage.pageSize,
                }
            };
            this.$http('/sys/listAccount', obj).then(resp => {

                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.total = resp.data.total;
                }
                this.listLoading = false;
            })
        },
        getorganizationId() {
            this.$http('/sys/ajaxListOrganization').then(resp => {
                if (resp.code == 1) {
                    this.addForm.organizaIdList = resp.data;
                }
            })
        },
        handleCurrentChange(val) {
            this.orderPage.pageNo = val;
            this.orderList();
        },
        onSubmit() {
            this.orderList();
        },
        // deleteSubmit(formName){
        //      this.$refs[formName].resetFields();
        // },
        selectId(index, row) {
            this.adminId = row.id;
            this.addUsersVisible = true
        },
        activateAdmin() {
            this.$http('/sys/activateAccount', { data: { id: this.adminId, organizationId: this.addForm.organizationId } }).then(resp => {
                if (resp.code == 1) {
                    this.$message({
                        message: resp.msg,
                        type: 'success'
                    })

                } else {
                    this.$message({
                        message: resp.msg,
                        type: 'error'
                    })
                }
                this.addUsersVisible = false
                this.orderList()
            })

        },
        switchoverType(index, row) { 
             var msg = '';
            if (row.state == 1) {
                msg = '正常'
            } else {
                msg = '冻结'
            }
             this.$confirm("确认该账户切换到"+msg+"状态么?", "提示", {})
                .then(() => {
                    this.$http('/sys/frozenAccount', { data: { accountId: row.id } }).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: resp.msg,
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.orderList()
                    })
                })
                .catch(() => { });
        },
        resetPwd(index, row) {
            this.$confirm("确认重置该账户密码么?", "提示", {})
                .then(() => {
                    this.$http('/sys/resetAccountPassword', { data: { accountId: row.id } }).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: resp.msg,
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.orderList()
                    })
                })
                .catch(() => { });
        }

    }
}
</script>
<style>
.demo-form-inline {
    text-align: left;
}

.addcity .area-select {
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0
}

.addcity .area-select .area-selected-trigger {
    padding-top: 0;
    padding-bottom: 0
}

.addcity .area-select-wrap>div:first-child {
    margin-left: 0
}
</style>
